<template>
  <div class="test-paper-container">
    <div class="test-paper-header">
      <div class="paper-name">{{ data.testPaperData.paperName }}</div>
      <div class="course-teacher-info">
        <span>课程名称：{{ data.testPaperData.courseName }}</span>
        <span>授课教师：{{ data.testPaperData.teacherName }}</span>
      </div>
    </div>
    <div class="questions-container">
      <div v-for="(question, index) in data.testPaperData.questionRespDTOs" :key="question.id" class="question-item">
        <div class="question-header">
          {{ index + 1 }}. {{ question.questionStem }}（{{ question.score }} 分）
        </div>

        <!-- 图片展示 -->
        <div v-if="question.questionImg && question.questionImg.length > 0" class="question-images">
          <el-image
              v-for="(imgUrl, imgIndex) in question.questionImg"
              :key="imgIndex"
              :src="imgUrl"
              fit="contain"
              style="width: 150px; height: 150px; margin-right: 10px; cursor: pointer;"
              @click="handleImageClick(imgUrl)"
          />
        </div>

        <!-- 单选题 -->
        <el-radio-group v-if="question.typeId === 1" v-model="question.newAnswer" disabled>
          <el-radio v-for="option in question.options" :key="option.id" :label="option.optionLabel">
            {{ option.optionLabel }}. {{ option.optionValue }}
          </el-radio>
        </el-radio-group>
        <!-- 多选题 -->
        <el-checkbox-group v-else-if="question.typeId === 2" v-model="question.newAnswer" disabled>
          <el-checkbox v-for="option in question.options" :key="option.id" :label="option.optionLabel">
            {{ option.optionLabel }}. {{ option.optionValue }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 填空题 -->
        <el-input v-else-if="question.typeId === 4" disabled v-model="question.newAnswer" placeholder="请输入您的答案" class="input-box"/>
        <!-- 简答题 -->
        <el-input v-else-if="question.typeId === 5" disabled type="textarea" :rows="8" v-model="question.newAnswer" placeholder="请输入您的答案"
                  class="input-box"/>

        <div class="answer-results">
          <span>标准答案：{{ question.answer }}</span>
          <span class="user-answer" v-if="question.typeId !== 5">
            用户答案：{{ Array.isArray(question.newAnswer) ? question.newAnswer.join(', ') : question.newAnswer }}
            <span :style="getResultStyle(question.result)" class="result-text">
              ({{ getResultText(question.result) }})
            </span>
          </span>
        </div>
        <!-- AI评语 -->
        <div v-if="question.aiRemark" class="ai-remark">
          <strong>AI评语：</strong>{{ question.aiRemark }}
        </div>
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <el-image-viewer
        v-if="data.imageViewerVisible"
        :url-list="[data.currentImageUrl]"
        @close="data.imageViewerVisible = false"
    />
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import request from "@/utils/request.js";
import router from "@/router/index.js";
import { ElMessage } from "element-plus";

const data = reactive({
  scoreId: router.currentRoute.value.query.id,
  testPaperData: {},
  imageViewerVisible: false,
  currentImageUrl: '',
});

const loadTestPaper = () => {
  data.scoreId = router.currentRoute.value.query.id;
  request.get(`/score/selectById/${data.scoreId}`).then((res) => {
    if (res.code === "200") {
      data.testPaperData = res.data.examPaperMsgRespDTO;
      // 解析并附加remark到对应问题上
      const remarks = res.data.remark.split("\n");
      remarks.forEach(remark => {
        const match = remark.match(/第(\d+)题: (.*)/);
        if (match) {
          const questionIndex = parseInt(match[1]) - 1;
          if (data.testPaperData.questionRespDTOs[questionIndex]) {
            data.testPaperData.questionRespDTOs[questionIndex].aiRemark = match[2];
          }
        }
      });
      // 添加用户答案和结果
      res.data.answerData.forEach((answerData) => {
        const question = data.testPaperData.questionRespDTOs.find((q) => q.id === answerData.questionId);
        if (question) {
          if (question.typeId === 2) {
            question.newAnswer = answerData.newAnswer.split(',').map(item => item.trim());
          } else {
            question.newAnswer = answerData.newAnswer;
          }
          question.result = answerData.result;
        }
      });
    } else {
      ElMessage.error(res.msg);
    }
  });
};

onMounted(loadTestPaper);

const handleImageClick = (imgUrl) => {
  data.currentImageUrl = imgUrl;
  data.imageViewerVisible = true;
};

const getResultText = (result) => {
  switch (result) {
    case -1:
      return "未评分";
    case 0:
      return "错误";
    case 1:
      return "正确";
    case 2:
      return "已评分";
    case 3:
      return "未完成";
    default:
      return "未知";
  }
};

const getResultStyle = (result) => {
  switch (result) {
    case -1:
      return {color: "#f39c12"}; // 黄色
    case 0:
      return {color: "#e74c3c"}; // 红色
    case 1:
      return {color: "#2ecc71"}; // 绿色
    case 2:
      return {color: "#2ecc71"}; // 绿色
    case 3:
      return {color: "#9b59b6"}; // 紫色
    default:
      return {color: "#7f8c8d"}; // 默认颜色
  }
};
</script>

<style scoped>
.test-paper-container {
  width: 80%;
  margin: 30px auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #ffffff;
  padding: 30px;
}

.test-paper-header {
  text-align: center;
  margin-bottom: 30px;
}

.paper-name {
  font-size: 28px;
  font-weight: bold;
  color: #333333;
}

.course-teacher-info {
  color: #7f8c8d;
  font-size: 18px;
}

.questions-container {
  margin-top: 50px;
}

.question-item {
  margin-bottom: 30px;
  padding: 20px;
  border-bottom: 1px solid #eeeeee;
}

.question-header {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 15px;
}

.question-body {
  margin-bottom: 20px;
}

.input-box {
  width: 100%;
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 16px;
  margin-top: 10px;
}

.standard-answer {
  margin-top: 10px;
}

.answer-results {
  margin-top: 15px;
  color: #333;
}

.user-answer {
  margin-left: 20px;
}

.result-text {
  font-weight: bold;
  margin-left: 10px;
}

.el-radio-group,
.el-checkbox-group {
  display: block;
  margin-top: 10px;
}

.el-radio,
.el-checkbox {
  display: block;
  margin-bottom: 0;
}

.ai-remark {
  margin-top: 15px;
  color: #34495e;
  font-size: 16px;
  line-height: 1.5;
}

.question-images {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
</style>



